<template>


	<view class="">
		<headerinfo></headerinfo>
		<view class="width60">
			<view class="daozuo">
				<view class="actions" >
					<view class="action-item"  @click="tabbarCheck(1)">
						<u-icon name="home" size="40px"></u-icon>
						<text>首页</text>
					</view>
					<view class="action-item" >
						<u-icon name="heart" size="40px"  color="#de4849"></u-icon>
						<text style="color: #de4849;">纪念厅</text>
					</view>
					<view class="action-item" @click="tabbarCheck(2)">
						<u-icon name="chat" size="40px"></u-icon>
						<text>留言</text>
					</view>
				</view>
			</view>
			<u-navbar title="纪念厅" leftIconColor="#fff" :autoBack="true" :bgColor="bgColor"
				:titleStyle="titleStyle"></u-navbar>
			<view class="formBox">
				<alljinian :docId="id"></alljinian>
				<view class="searchPage">
					<view class="dating">
						<view class="list" @click="toInfo(item)" v-for="(item,index) in hallList" :key="index">
							<image :src="item.avatar" mode="heightFix"></image>
							<view class="name">
								{{item.hallName}}
							</view>
							<view class="desc">
								{{item.passDate}}
							</view>
							<view class="btns">
								<span class="edit" @click.stop="toEdit(item)">编辑</span>
								<span class="edit" style="margin-left: 10rpx;">进入</span>
							</view>
						</view>
					</view>
				</view>
				<allting :id="id"></allting>
				<!-- <view class="create" @click="toCreate">
					添加纪念厅
				</view> -->
				<!-- 	<u-tabbar :value="tabbarIndex" :fixed="true" :placeholder="true" :safeAreaInsetBottom="true">
					<u-tabbar-item text="主页" icon="home" @click="tabbarCheck(1)"></u-tabbar-item>
					<u-tabbar-item text="纪念厅" icon="heart"></u-tabbar-item>
					<u-tabbar-item text="留言" icon="chat" @click="tabbarCheck(2)"></u-tabbar-item>
				</u-tabbar> -->
			</view>
		</view>

	</view>

</template>

<script>
	import alljinian from './components/alljinian'
	import allting from './components/allting'
	export default {
		components: {
			alljinian,
			allting
		},
		data() {
			return {
				bgColor: '#de4849',
				titleStyle: {
					color: '#fff'
				},
				hallList: [],
				tabbarIndex: 1,
				id: '' // museumId
			};
		},
		onLoad(e) {
			this.id = e.id

			if (e.userid) {
				this.userid = e.userid
			}

			this.getData()
		},
		methods: {
			getData() {
				let data = {
					museumId: this.id
				}
				this.$api.museumgetMuseum(data).then(res => {
					console.log('12313')
					console.log(res)
					this.hallList = res.hallList
				})
			},
			toCreate() {
				uni.navigateTo({
					url: `/pagesobit/obit/createting?id=${this.id}&userid=${this.userid}`
				})
			},
			toEdit(item) {
				uni.navigateTo({
					url: `/pagesobit/obit/createting?id=${item.docId}`
				})
			},
			tabbarCheck(index) {
				if (index == 1) {
					uni.redirectTo({
						url: `/pagesobit/obit/citang?id=${this.id}`
					})
				} else {
					uni.redirectTo({
						url: `/pagesobit/obit/liuyan?id=${this.id}`
					})
				}
			},
			toInfo(item) {
				console.log(item)
				uni.navigateTo({
					url: `/pagesobit/obit/tingInfo?hallId=${item.docId}`
				})
			},
			del(item) {
				console.log(item)
				uni.navigateTo({
					url: `/pagesobit/obit/tingInfo?hallId=${item.docId}`
				})
			},
		}
	};
</script>


<style lang="scss" scoped>
	.formBox {
		display: flex;
		justify-content: space-between;
		// height: calc(100vh - 250rpx);
		padding: 0 40rpx;

		.tingleft {
			width: 300px;

			.tuijianVideo {
				margin-top: 30px;

				.titles {
					display: flex;
					align-items: center;
					justify-content: center;

					image {
						width: 40rpx;
						height: auto;
						margin-right: 10rpx;
					}
				}

				.videolist {
					display: flex;
					align-items: center;
					justify-content: space-between;
					flex-wrap: wrap;

					.listss {
						width: 48%;
						height: 170rpx;
						border-radius: 10rpx;
						overflow: hidden;
						margin-top: 30rpx;
						cursor: pointer;

						image {
							width: 100%;
							height: 100%;

						}
					}
				}
			}

		}

	}

	.create {
		width: 600rpx;
		height: 80rpx;
		background: #de4849;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 30rpx auto;
		border-radius: 20rpx;
	}

	.searchPage {
		width: 450px;
		height: calc(100vh);
		background-image: url('https://jn.huaien.com/static/img/memorial-body.png');
		background-size: 100% 100%;
	}

	.title {
		position: absolute;
		top: 60rpx;
		color: #fff;
		font-size: 36rpx;
		left: 50%;
		transform: translateX(-50%);
	}

	.otherDesc {
		position: absolute;
		bottom: 9%;
		right: 18%;
		display: flex;
		align-items: flex-end;

		div {
			writing-mode: vertical-rl;
			font-size: 26rpx;
		}
	}

	.dating {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		padding: 20rpx;
		width: 100%;
		margin: 0 auto;

		.list {
			width: 49%;
			margin-top: 20rpx;
			padding: 20rpx;
			border-radius: 10rpx;
			position: relative;
			padding-left: 160rpx;
			background-color: #fff;
			min-height: 150rpx;

			.name {
				font-weight: bold;
				font-size: 28rpx;
				margin-bottom: 10rpx;
			}

			.desc {
				font-size: 24rpx;
				color: #848484;
			}

			.btns {
				display: flex;
				align-items: center;
			}

			.edit {
				font-size: 24rpx;
				padding: 10rpx 30rpx;
				border-radius: 40px;
				background-color: #2e0e01;
				color: #f7d048;
				margin-top: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			image {
				position: absolute;
				left: 20rpx;
				top: 50%;
				transform: translateY(-50%);
				height: 125rpx;
				width: auto;
			}
		}
	}


	/* 点赞等操作 */
	.actions {
		display: flex;
		align-items: center;
		line-height: 1.3;
		padding-right: 44upx;
		padding-top: 16upx;
		position: fixed;
		left: 0;
		left: 15%;
		flex-direction: column;
		top: 30%;

		.action-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			margin-right: 60upx;
			color: #333;
			margin-bottom: 80rpx;
			cursor: pointer;

			span {
				font-size: 24rpx;
			}

			.iconfont {
				font-size: 33px;
			}
		}

		.yticon {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 60upx;
			height: 60upx;
			font-size: 52upx;

			&.reverse {
				position: relative;
				top: 6upx;
				transform: scaleY(-1);
			}

			&.active {
				color: #ec706b;
			}
		}

		.icon-fenxiang2 {
			font-weight: bold;
			font-size: 88upx;
		}

		.icon-shoucang {
			font-size: 88upx;
		}
	}
</style>